<template>
	<div>
		<div v-if="postState">
			<div style="position: relative">
				<el-row style="padding: 50px; height: 62vh">
					<el-col :span="23">
						<blogShow
							:blogData="blogData"
							rowWidth="100%"
						></blogShow>
					</el-col>
				</el-row>
				<el-row
					style="
						position: absolute;
						bottom: 1vh;
						left: 0;
						right: 0;
						display: flex;
						align-items: center;
					"
				>
					<el-col :span="19" :offset="2">
						<el-pagination
							v-model:current-page="currentPage"
							background
							@update:current-page="updatePage"
							:page-size="6"
							:pager-count="11"
							:hide-on-single-page="true"
							layout="prev, pager, next"
							:total="total"
						/>
					</el-col>
					<el-col :span="2" :offset="1">
						<div>
							<el-link
								:icon="EditPen"
								type="danger"
								style="font-size: 12px"
								@click="toAddUserBlog"
							>
								创作更多
							</el-link>
						</div>
					</el-col>
				</el-row>
			</div>
		</div>
		<div v-else>
			<div>
				<el-alert
					title="您还没有发表过博客"
					type="info"
					show-icon
					:closable="false"
					center
				>
					<template #default>
						<el-link
							type="success"
							:icon="EditPen"
							@click="toAddUserBlog"
							>快来发表您的第一篇博客吧！</el-link
						>
					</template>
				</el-alert>
			</div>
		</div>
	</div>
</template>

<script setup>
import { onBeforeMount, onMounted } from 'vue';
import { blog } from '../store/blog.js';
import axios from 'axios';
import { EditPen } from '@element-plus/icons-vue';
//异步组件引入
import { useIntersectionObserver } from '@vueuse/core';
import { useRouter } from 'vue-router';
const router = useRouter();
const blogShow = defineAsyncComponent(() =>
	import('../components/blogShow.vue')
);
const blogShowTarget = ref(null);
const blogShowTargetIsVisible = ref(false);
const { stop } = useIntersectionObserver(
	[blogShowTarget],
	([{ isIntersecting }]) => {
		if (isIntersecting) {
			blogShowTargetIsVisible.value = isIntersecting;
		}
	}
);

let username = localStorage.getItem('username');
const blogStore = blog();
const blogState = ref(null);
const blogData = ref(null);
const currentPage = ref(1);
const postState = ref(false);
const total = ref(6);

const toAddUserBlog = async () => {
	router.push('/addBlog');
};

const updatePage = async (pageNum) => {
	try {
		const res = await axios({
			baseURL: 'http://localhost:5000',
			url: '/getUserPageBlog',
			method: 'post',
			data: {
				limit: 6,
				offset: (pageNum - 1) * 6,
				uploader: username,
			},
		});
		if (res.data.state === 'erorr') {
			ElNotification({
				title: 'Warning',
				message: '未查询到博客',
				type: 'warning',
			});
			return location.reload();
		} else {
			blogData.value = res.data.data;
		}
	} catch (error) {
		console.log(error);
		ElNotification({
			title: 'Danger',
			message: '服务器错误',
			type: 'danger',
		});
		return location.reload();
	}
};

onBeforeMount(async () => {
	blogState.value = await blogStore.getUserBlog(username);
	console.log(blogState.value);
	if (blogState.value !== 'error' && blogState.value !== 'none') {
		postState.value = true;
		total.value = blogState.value.length;
		try {
			const res = await axios({
				baseURL: 'http://localhost:5000',
				url: '/getUserPageBlog',
				method: 'post',
				data: {
					limit: 6,
					offset: 0,
					uploader: username,
				},
			});
			if (res.data.state === 'erorr') {
				ElNotification({
					title: 'Warning',
					message: '未查询到博客',
					type: 'warning',
				});
				return location.reload();
			} else {
				blogData.value = res.data.data;
			}
		} catch (error) {
			console.log(error);
			ElNotification({
				title: 'Danger',
				message: '服务器错误',
				type: 'danger',
			});
			return location.reload();
		}
	}
});
</script>

<style scoped>
:deep(.el-pagination) {
	display: flex;
	justify-content: center;
}
</style>
